<template>
	<div
		class="BlueprintsNodeNamer"
		:class="{
			beingEdited: isAliasBeingEdited,
			hasEyebrow: isAliased || isAliasBeingEdited,
		}"
		data-writer-unselectable="true"
	>
		<div class="blockName" @click="enableEditor">
			{{ blockName }}
		</div>
		<div class="alias">
			<div
				v-if="isAliased || isAliasBeingEdited"
				ref="aliasEditorEl"
				class="aliasEditor"
				:contenteditable="isAliasBeingEdited"
				data-writer-unselectable="true"
				@click="enableEditor"
				@mousemove="handleAliasEditorMousemove"
				@blur="handleAliasChange"
				@keydown.enter="handleAliasChange"
			>
				{{ aliasFieldViewModel }}
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed, nextTick, ref, toRef, useTemplateRef } from "vue";
import { useComponentFieldViewModel } from "@/builder/useComponentFieldViewModel";
import { Component } from "@/writerTypes";

const props = defineProps<{
	componentId: Component["id"];
	blockName: string;
}>();

const aliasFieldViewModel = useComponentFieldViewModel({
	componentId: toRef(props, "componentId"),
	fieldKey: "alias",
});

const isAliased = computed(() => Boolean(aliasFieldViewModel.value));
const aliasEditorEl = useTemplateRef("aliasEditorEl");
const isAliasBeingEdited = ref(false);

async function enableEditor() {
	if (isAliasBeingEdited.value) return;

	isAliasBeingEdited.value = true;
	await nextTick();

	const el = aliasEditorEl.value;
	el.focus();
	const range = document.createRange();
	const selection = window.getSelection();
	range.setStart(el, el.childNodes.length);
	range.collapse(true);
	selection.removeAllRanges();
	selection.addRange(range);
}

function handleAliasChange() {
	const newValue = aliasEditorEl.value.textContent;
	aliasEditorEl.value.blur();
	isAliasBeingEdited.value = false;
	aliasFieldViewModel.value = newValue;
}

function handleAliasEditorMousemove(ev: MouseEvent) {
	if (!isAliasBeingEdited.value) return;
	ev.stopPropagation();
}
</script>

<style scoped>
.BlueprintsNodeNamer {
	width: 100%;
	overflow: hidden;
}

.blockName {
	transition: 0.2s ease-in-out;
	transition-property: color, font-size;
}

.BlueprintsNodeNamer.hasEyebrow .blockName {
	font-size: 12px;
	color: var(--builderSecondaryTextColor);
	background: var(--builderBackgroundColor) !important;
}

.BlueprintsNodeNamer:not(.hasEyebrow) .blockName {
	cursor: text;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 140%;
	padding: 4px;
	margin-left: -4px;
	border-radius: 4px;
}

.alias {
	transition: 0.2s ease-in-out;
	transition-property: top;
	position: relative;
}

.BlueprintsNodeNamer:not(.hasEyebrow) .alias {
	top: -24px;
}

.BlueprintsNodeNamer.hasEyebrow .alias {
	top: 0;
}

.aliasEditor {
	transition-property: color, font-size;
	padding: 2px 4px 2px 4px;
	margin-bottom: -2px;
	margin-left: -4px;
	border-radius: 4px;
	width: 100%;
	outline: none;
	border: none;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 140%;
	cursor: text;
}

.BlueprintsNodeNamer.beingEdited .aliasEditor {
	background: var(--builderSubtleSeparatorColor);
}
</style>
